<!-- 历史 -->
<template>
  <div class="dig_box" style="max-width: 750px; margin: 0 auto">
    <div class="box" @scroll="scrollList">
      <div class="liLiftone">
        <center v-for="(item, index) in timeSpansDate" :key="index">
          <div class="liLiftDianBox"></div>
          <div class="threadBox" v-if="index !== timeSpansDate.length - 1"></div>
        </center>
      </div>
      <ul>
        <li v-for="itme in timeSpansDate" :key="itme.trip_id">
          <p class="about_p"><span style="color: #aaa">直播间 <span style="color: black;">{{ itme.live_title }}</span></span>  <span style="color: #6D7278;">{{stateTiem(itme.start_time,itme.end_time)}}</span></p>
          <p>
            <span style="color: #aaa;margin-top: 8px;margin-bottom: 8px;">直播时间：</span>{{ itme.start_time | startTime }} ——
            {{ itme.end_time | startTime }}
          </p>
          <p class="bottom_p">
            <span style="color: #aaa">打卡时间：</span><span :class="
              itme.upper_state == 1
                ? 'a'
                : itme.upper_state == 3
                  ? 'yellow'
                  : itme.upper_state == 4
                    ? 'Pink'
                    : ''
            ">
              <span v-if="itme.upper_time != 0"> {{ itme.upper_time | startTime }}</span> <span
                v-else>未打卡</span></span><span v-if="itme.upper_state == 3">(迟到)</span>
            <span v-if="itme.upper_state == 4">(异常)</span>
            ——
            <span :class="
              itme.below_state == 1
                ? 'a'
                : itme.below_state == 3
                  ? 'yellow'
                  : itme.below_state == 4
                    ? 'Pink'
                    : ''
            "><span v-if="itme.below_time != 0"> {{ itme.below_time | startTime }} </span> <span v-else>未打卡</span>

            </span> <span v-if="itme.below_state == 3">(早退)</span>
            <span v-if="itme.below_state == 4">(异常)</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "AboutView",
  components: {},
  data() {
    return {
      /** 下标index */
      cellNumber: 0,
      /**对话框 */
      show: false,
      /** 页面循环数据 */
      timeSpansDate: [],
      /** 页数 */
      page: 1,
      /** 总条数 */
      total: 0,
    };
  },
  created() {
    this.getHistory();
  },
  mounted() { },
  filters: {

    // 打卡时间
    startTime(val) {
      const dt = new Date(val * 1000);
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      return `${hh}:${mm}`;
    },
    // 直播时间
    Time(val) {
      const dt = new Date(val * 1000);
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      return `${m}/${d}`;
    },
  },
  methods: {
    /** 直播间开始时间 */
    stateTiem(val , owe){
      const dt = new Date(val * 1000);
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0"); 
      const dts = new Date(owe * 1000);
      const ms = (dts.getMonth() + 1 + "").padStart(2, "0");
      const ds = (dts.getDate() + "").padStart(2, "0"); 
      console.log(d,ds, '时间')
      if(d==ds){
        return `${m}/${d}`;
      } else {
        return `${m}/${d}--${ms}/${ds}`;
      }
    },
    /** 下拉加载事件 */
    scrollList(e) {
      const bottomDis =
        e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomDis < 1 && this.timeSpansDate.length < this.total) {
        this.page += 1
        let params = {
          /** 条数 */
          limit: 10,
          /** 页数 */
          page: this.page,
        };

        this.$api.getHistory(params).then((res) => {
          this.timeSpansDate = [...this.timeSpansDate, ...res.list]
          this.total = res.pagination.totalCount;
        });
      }
    },
    /**
     * 单元格
     */
    changeFlag(index) {
      this.cellNumber = index;
      this.show = !this.show;
      this.timeSpansDate[index].flag = !this.timeSpansDate[index].flag;
    },
    /** 排班历史 */
    getHistory() {
      let params = {
        /** 条数 */
        limit: 10,
        /** 页数 */
        page: this.page,
      };
      this.$api.getHistory(params).then((res) => {
        this.timeSpansDate = res.list;
        this.total = res.pagination.totalCount;
      });
    },
  },
};
</script>
<style scoped >
.bottom_p{
  margin-bottom: 12px;
}
.about_p {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  text-overflow: ellipsis;
}

.dig_box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("https://s3.bmp.ovh/imgs/2023/02/27/072d644dbb04f591.png") no-repeat;
  background-size: 100% 100%;
}

.yellow {
  color: #ffb314;
}

.purple {
  color: #a064fe;
}

.Pink {
  color: #fd6466;
}

.a {
  color: #fa6400;
}

ul {
  font-size: 0.16rem;
  width: 90%;

  
}
ul li {
  width: 100%;
  padding-top: 10px;
  position: relative;
  background-color: #fff;
  margin-top: 0.2rem;
  padding: 5px 10px;
  font-size: 16px;
  box-sizing: border-box;
  height: .9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  border-top: #3bc2a5 1.5px solid;
  box-sizing: border-box;
}

ul li p {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  margin-top: 0.4rem;
  padding-bottom: 0.4rem;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #f5f5f5;

}
.liLiftone {
  margin: 0.15rem 0.0625rem;
}

.liLiftDianBox {
  width: 0.08rem;
  height: 0.08rem;
  border: 2px solid #3bc2a5;
  border-radius: 50%;
  position: relative;
}

.liLiftDianBox::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.04rem;
  height: 0.04rem;
  border-radius: 50%;
  background-color: #3bc2a5;
  top: 24%;
  left: 24%;
}

.threadBox {
  width: 0.01rem;
  height: 1rem;
  border-left: 1.5px dashed #ccc;
}

.dialog {
  max-height: 1.5rem;
  overflow-y: auto;
}

.dialogBox {
  text-align: center;
  margin-top: 0.1rem;
}

.content {
  height: 0.6rem;
  font-size: 0.1rem;
  border: 1px solid #ccc;
  text-align: center;
}

.title {
  font-size: 0.16rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  border: 1px solid #ccc;

  .icon {
    float: right;
    margin-top: 0.0625rem;
  }
}
</style>
